<template>
  <footer>
    <div class="foot">
      <div class="top my-5">
      </div>
      <div class="container">
        <div class="mobile-art">
          <a href="/#/pages/detail/detail?id=19">회사소개</a>
          <a href="/#/pages/detail/detail?id=20">구매 절차 안내</a>
          <a href="/#/pages/detail/detail?id=21"> 이용약관</a>
          <a href="/#/pages/detail/detail?id=22">개인정보처리방침</a>
          <a href="/#/pages/detail/detail?id=23">배송 안내</a>
          <a href="/#/pages/detail/detail?id=24">반품/교환에 관한 정책 </a>
          <a href="/#/pages/detail/detail?id=25"> 고객센터</a>
          <a href="/#/pages/detail/detail?id=26">주문 취소</a>
          <a href="/#/pages/detail/detail?id=27">FAQ 자주 묻는 질문</a>
        </div>
      </div>
      <div class="copy">
        <div class="pay-img">
          <img
            src="https://pic.compgoo.com/uploads/150b87126e18eaa590cfb3d97a349893.png?_t=1732351596&amp;_s=a10657264f7dbdfdb7cbcc4cfa43be75&amp;_token=10c7241c27132bf7ebca0936dc36b730&amp;_e=10&amp;_c=f22b1f33888216ab508bcb93de7eca13">
        </div>
        <p class="py-3">Copyright © <a href="/" title="">lqqu.com</a> 2024 .All rights reserved</p>
      </div>
    </div>

  </footer>
</template>

<script>
export default {
  data() {
    return {
      transform: 'translateY(50vh)',
      timer: 0,
      backgroundColor: 'rgba(0,0,0,0)',
      show: false,
      config: {},
    };
  },
  props: {
    contentHeight: {
      type: Number,
      default: 0
    },
    //是否是tabbar页面
    hasTabbar: {
      type: Boolean,
      default: false
    },
    shareList: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  created() {
    const height = uni.upx2px(this.contentHeight) + 'px';
    this.config = {
      height: height,
      transform: `translateY(${height})`,
      backgroundColor: 'rgba(0,0,0,.4)',
    }
    this.transform = this.config.transform;
  },
  methods: {
    toggleMask() {
      //防止高频点击
      if (this.timer == 1) {
        return;
      }
      this.timer = 1;
      setTimeout(() => {
        this.timer = 0;
      }, 500)

      if (this.show) {
        this.transform = this.config.transform;
        this.backgroundColor = 'rgba(0,0,0,0)';
        setTimeout(() => {
          this.show = false;
          this.hasTabbar && uni.showTabBar();
        }, 200)
        return;
      }

      this.show = true;
      //等待mask重绘完成执行
      if (this.hasTabbar) {
        uni.hideTabBar({
          success: () => {
            setTimeout(() => {
              this.backgroundColor = this.config.backgroundColor;
              this.transform = 'translateY(0px)';
            }, 10)
          }
        });
      } else {
        setTimeout(() => {
          this.backgroundColor = this.config.backgroundColor;
          this.transform = 'translateY(0px)';
        }, 10)
      }
    },
    //防止冒泡和滚动穿透
    stopPrevent() { },
    //分享操作
    shareToFriend(type) {
      this.$api.msg(`分享给${type}`);
      this.toggleMask();
    },
  }
}
</script>

